<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>

<body>
  <form action="#" name="form">
    <input type="text" name="advName">
    <input type="text" name="advOrder">
    <input type="file" name="advFile" id="file" multiple accept="image/png,image/gif,image/jpeg,image/webp">
    <br>
    <img id="pre" src="" alt="" width="100">
    <button id="btn">提交</button>
  </form>

  <script>
    const oFile = document.getElementById('file');
    const oPre = document.getElementById("pre")
    const oBtn = document.getElementById('btn')

    oBtn.onclick = function (e) {
      e.preventDefault();

      //使用fromData来收集某个表单的数据
      const myFormData = new FormData(document.form)
      console.log(myFormData);

      console.log(myFormData.get("advName"));
      console.log(myFormData.get("advOrder"));
      console.log(myFormData.get("advFile"));

      //向服务器提交数据
      axios.put("/updata", myFormData)
    }



    oFile.onchange = function (e) {
      //文件上传的事件中，当上传完成，在当前的input对象上有一个files属性,包含了上传所有文件信息组成的数组
      console.log(this.files[0]);

      //FileReader是js提供的异步读取文件的类,和input的file配合使用,实例化以后得到一个对象,提供了很多方法可以读取文件
      const reader = new FileReader();

      //reader上有一个readAsDataURL方法 可以把文件读成base64的格式
      reader.readAsDataURL(this.files[0]);

      //当某个reader读完以后,会触发onload事件
      reader.onload = function (e) {
        //e.target.result就是最后读取到的数据
        console.log(e.target.result);
        oPre.src = e.target.result;
      }
    }
  </script>
</body>

</html>